<template>
  <div class="lifecycle-container">
    <div class="page-header">
      <div class="page-title">设备生命周期管理</div>
      <div class="page-actions">
        <el-button type="primary" icon="el-icon-plus" @click="showAddDeviceDialog">新增设备</el-button>
        <el-button icon="el-icon-download">导出报表</el-button>
      </div>
    </div>
    
    <!-- 过滤器部分 -->
    <el-card class="filters-bar">
      <div class="filter-row">
        <div class="filter-group">
          <span class="filter-label">设备状态：</span>
          <el-select v-model="statusFilter" multiple placeholder="选择状态">
            <el-option label="规划中" value="planning"></el-option>
            <el-option label="采购中" value="procurement"></el-option>
            <el-option label="安装中" value="installation"></el-option>
            <el-option label="运行中" value="operational"></el-option>
            <el-option label="维护中" value="maintenance"></el-option>
            <el-option label="已退役" value="retirement"></el-option>
          </el-select>
        </div>
        <div class="filter-group">
          <span class="filter-label">设备类型：</span>
          <el-select v-model="typeFilter" multiple placeholder="选择类型">
            <el-option label="服务器" value="server"></el-option>
            <el-option label="交换机" value="switch"></el-option>
            <el-option label="路由器" value="router"></el-option>
            <el-option label="防火墙" value="firewall"></el-option>
          </el-select>
        </div>
        <div class="filter-group">
          <span class="filter-label">安装日期：</span>
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </div>
        <div class="filter-group">
          <el-button type="primary" @click="applyFilters">查询</el-button>
          <el-button @click="resetFilters">重置</el-button>
        </div>
      </div>
    </el-card>
    
    <el-card class="workflow-container">
      <div class="workflow-header">
        <div class="workflow-title">设备流程</div>
        <div class="workflow-actions">
          <el-button type="primary" icon="el-icon-refresh" @click="refreshWorkflow">刷新</el-button>
        </div>
      </div>
      
      <div class="workflow-steps">
        <div class="step" :class="{ active: currentStep === 'planning' }">
          <div class="step-circle">1</div>
          <div class="step-title">规划</div>
          <div class="step-description">设备需求分析和规划</div>
        </div>
        <div class="step" :class="{ active: currentStep === 'procurement' }">
          <div class="step-circle">2</div>
          <div class="step-title">采购</div>
          <div class="step-description">设备采购和合同管理</div>
        </div>
        <div class="step" :class="{ active: currentStep === 'installation' }">
          <div class="step-circle">3</div>
          <div class="step-title">安装</div>
          <div class="step-description">设备安装和调试</div>
        </div>
        <div class="step" :class="{ active: currentStep === 'operational' }">
          <div class="step-circle">4</div>
          <div class="step-title">运行</div>
          <div class="step-description">设备正常运行和监控</div>
        </div>
        <div class="step" :class="{ active: currentStep === 'maintenance' }">
          <div class="step-circle">5</div>
          <div class="step-title">维护</div>
          <div class="step-description">设备维护和故障处理</div>
        </div>
        <div class="step" :class="{ active: currentStep === 'retirement' }">
          <div class="step-circle">6</div>
          <div class="step-title">退役</div>
          <div class="step-description">设备退役和资产处理</div>
        </div>
      </div>
      
      <el-table :data="filteredDevices" border style="width: 100%">
        <el-table-column prop="name" label="设备名称"></el-table-column>
        <el-table-column prop="type" label="设备类型"></el-table-column>
        <el-table-column label="状态">
          <template #default="scope">
            <el-tag :type="getStatusType(scope.row.status)" size="small">
              {{ getStatusText(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="installDate" label="安装日期"></el-table-column>
        <el-table-column prop="warrantyEndDate" label="保修到期"></el-table-column>
        <el-table-column prop="owner" label="负责人"></el-table-column>
        <el-table-column label="操作" width="200">
          <template #default="scope">
            <el-button type="text" size="small" @click="showDeviceDetails(scope.row)">详情</el-button>
            <el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button type="text" size="small" @click="handleStatusChange(scope.row)">变更状态</el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalDevices">
        </el-pagination>
      </div>
    </el-card>
    
    <!-- 设备详情对话框 -->
    <el-dialog title="设备详情" v-model="deviceDetailsVisible" width="70%">
      <div class="device-details-panel">
        <div class="device-details-header">
          <div class="device-details-title">基本信息</div>
        </div>
        <el-form :model="currentDevice" label-width="100px" class="device-details-form">
          <el-form-item label="设备名称">
            <el-input v-model="currentDevice.name"></el-input>
          </el-form-item>
          <el-form-item label="设备类型">
            <el-select v-model="currentDevice.type" placeholder="选择设备类型">
              <el-option label="服务器" value="server"></el-option>
              <el-option label="交换机" value="switch"></el-option>
              <el-option label="路由器" value="router"></el-option>
              <el-option label="防火墙" value="firewall"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="设备状态">
            <el-select v-model="currentDevice.status" placeholder="选择状态">
              <el-option label="规划中" value="planning"></el-option>
              <el-option label="采购中" value="procurement"></el-option>
              <el-option label="安装中" value="installation"></el-option>
              <el-option label="运行中" value="operational"></el-option>
              <el-option label="维护中" value="maintenance"></el-option>
              <el-option label="已退役" value="retirement"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="安装日期">
            <el-date-picker v-model="currentDevice.installDate" type="date" placeholder="选择日期"></el-date-picker>
          </el-form-item>
          <el-form-item label="保修到期">
            <el-date-picker v-model="currentDevice.warrantyEndDate" type="date" placeholder="选择日期"></el-date-picker>
          </el-form-item>
          <el-form-item label="负责人">
            <el-input v-model="currentDevice.owner"></el-input>
          </el-form-item>
        </el-form>
        <div class="form-actions">
          <el-button @click="deviceDetailsVisible = false">取消</el-button>
          <el-button type="primary" @click="saveDeviceDetails">保存</el-button>
        </div>
      </div>
    </el-dialog>
    
    <!-- 状态变更对话框 -->
    <el-dialog title="变更设备状态" v-model="statusChangeVisible" width="50%">
      <el-form :model="statusChangeForm" label-width="100px">
        <el-form-item label="当前状态">
          <el-tag :type="getStatusType(currentDevice.status)">{{ getStatusText(currentDevice.status) }}</el-tag>
        </el-form-item>
        <el-form-item label="新状态">
          <el-select v-model="statusChangeForm.newStatus" placeholder="选择新状态">
            <el-option label="规划中" value="planning"></el-option>
            <el-option label="采购中" value="procurement"></el-option>
            <el-option label="安装中" value="installation"></el-option>
            <el-option label="运行中" value="operational"></el-option>
            <el-option label="维护中" value="maintenance"></el-option>
            <el-option label="已退役" value="retirement"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="变更原因">
          <el-input type="textarea" v-model="statusChangeForm.reason" rows="3"></el-input>
        </el-form-item>
      </el-form>
      <div class="form-actions">
        <el-button @click="statusChangeVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmStatusChange">确认变更</el-button>
      </div>
    </el-dialog>
    
    <!-- 添加设备对话框 -->
    <el-dialog 
      title="新增设备" 
      v-model:visible="addDeviceVisible" 
      width="60%">
      <div class="add-device-panel">
        <div class="add-device-header">
          <div class="add-device-title">设备信息</div>
        </div>
        <el-form :model="newDevice" label-width="100px" class="add-device-form">
          <el-form-item label="设备名称">
            <el-input v-model="newDevice.name"></el-input>
          </el-form-item>
          <el-form-item label="设备类型">
            <el-select v-model="newDevice.type" placeholder="选择设备类型">
              <el-option label="服务器" value="server"></el-option>
              <el-option label="交换机" value="switch"></el-option>
              <el-option label="路由器" value="router"></el-option>
              <el-option label="防火墙" value="firewall"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="设备状态">
            <el-select v-model="newDevice.status" placeholder="选择状态">
              <el-option label="规划中" value="planning"></el-option>
              <el-option label="采购中" value="procurement"></el-option>
              <el-option label="安装中" value="installation"></el-option>
              <el-option label="运行中" value="operational"></el-option>
              <el-option label="维护中" value="maintenance"></el-option>
              <el-option label="已退役" value="retirement"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="安装日期">
            <el-date-picker v-model="newDevice.installDate" type="date" placeholder="选择日期"></el-date-picker>
          </el-form-item>
          <el-form-item label="保修到期">
            <el-date-picker v-model="newDevice.warrantyEndDate" type="date" placeholder="选择日期"></el-date-picker>
          </el-form-item>
          <el-form-item label="负责人">
            <el-input v-model="newDevice.owner"></el-input>
          </el-form-item>
        </el-form>
        
        <!-- 模拟工作区显示 -->
        <div class="workspace-preview">
          <div class="workspace-title">#Workspace 模拟显示</div>
          <div class="workspace-content">
            <div class="device-preview">
              <div class="device-icon">
                <i :class="getDeviceIcon(newDevice.type)"></i>
              </div>
              <div class="device-info">
                <div class="device-name">{{ newDevice.name || '设备名称' }}</div>
                <div class="device-type">{{ getDeviceTypeText(newDevice.type) }}</div>
                <div class="device-status">
                  <el-tag :type="getStatusType(newDevice.status)" size="small">
                    {{ getStatusText(newDevice.status) }}
                  </el-tag>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <div class="form-actions">
          <el-button @click="addDeviceVisible = false">取消</el-button>
          <el-button type="primary" @click="addDevice">保存</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'DeviceLifecycle',
  data() {
    return {
      // 过滤器数据
      statusFilter: [],
      typeFilter: [],
      dateRange: null,
      
      // 分页数据
      currentPage: 1,
      pageSize: 10,
      totalDevices: 0,
      
      // 当前流程步骤
      currentStep: 'operational',
      
      // 设备数据
      devices: [
        {
          id: 1,
          name: '服务器A001',
          type: 'server',
          status: 'operational',
          installDate: '2023-01-15',
          warrantyEndDate: '2026-01-15',
          owner: '张三'
        },
        {
          id: 2,
          name: '交换机B002',
          type: 'switch',
          status: 'maintenance',
          installDate: '2022-11-20',
          warrantyEndDate: '2025-11-20',
          owner: '李四'
        },
        {
          id: 3,
          name: '路由器C003',
          type: 'router',
          status: 'planning',
          installDate: '',
          warrantyEndDate: '',
          owner: '王五'
        }
      ],
      
      // 当前设备详情
      deviceDetailsVisible: false,
      currentDevice: {},
      
      // 状态变更
      statusChangeVisible: false,
      statusChangeForm: {
        newStatus: '',
        reason: ''
      },
      
      // 添加设备
      addDeviceVisible: false,
      newDevice: {
        name: '',
        type: 'server',
        status: 'planning',
        installDate: '',
        warrantyEndDate: '',
        owner: ''
      }
    }
  },
  computed: {
    filteredDevices() {
      // 这里实现过滤逻辑
      return this.devices;
    }
  },
  methods: {
    applyFilters() {
      // 实现过滤逻辑
      console.log('应用过滤器', this.statusFilter, this.typeFilter, this.dateRange);
    },
    resetFilters() {
      this.statusFilter = [];
      this.typeFilter = [];
      this.dateRange = null;
    },
    refreshWorkflow() {
      // 刷新工作流程
      console.log('刷新工作流程');
    },
    handleSizeChange(size) {
      this.pageSize = size;
      // 重新加载数据
    },
    handleCurrentChange(page) {
      this.currentPage = page;
      // 重新加载数据
    },
    showDeviceDetails(device) {
      this.currentDevice = JSON.parse(JSON.stringify(device));
      this.deviceDetailsVisible = true;
    },
    handleEdit(device) {
      this.currentDevice = JSON.parse(JSON.stringify(device));
      this.deviceDetailsVisible = true;
    },
    handleStatusChange(device) {
      this.currentDevice = JSON.parse(JSON.stringify(device));
      this.statusChangeForm.newStatus = '';
      this.statusChangeForm.reason = '';
      this.statusChangeVisible = true;
    },
    saveDeviceDetails() {
      // 保存设备详情
      console.log('保存设备详情', this.currentDevice);
      this.deviceDetailsVisible = false;
      // 更新设备列表
    },
    confirmStatusChange() {
      // 确认状态变更
      console.log('确认状态变更', this.statusChangeForm);
      this.statusChangeVisible = false;
      // 更新设备状态
    },
    getStatusText(status) {
      const statusMap = {
        planning: '规划中',
        procurement: '采购中',
        installation: '安装中',
        operational: '运行中',
        maintenance: '维护中',
        retirement: '已退役'
      };
      return statusMap[status] || status;
    },
    getStatusType(status) {
      const typeMap = {
        planning: 'info',
        procurement: 'primary',
        installation: 'warning',
        operational: 'success',
        maintenance: 'warning',
        retirement: 'danger'
      };
      return typeMap[status] || '';
    },
    // 添加以下两个方法
    getDeviceIcon(type) {
      const iconMap = {
        server: 'el-icon-s-platform',
        switch: 'el-icon-connection',
        router: 'el-icon-share',
        firewall: 'el-icon-lock'
      };
      return iconMap[type] || 'el-icon-s-platform';
    },
    getDeviceTypeText(type) {
      const typeMap = {
        server: '服务器',
        switch: '交换机',
        router: '路由器',
        firewall: '防火墙'
      };
      return typeMap[type] || type;
    },
    // 添加显示对话框的方法
    showAddDeviceDialog() {
      console.log('显示添加设备对话框');
      // 重置新设备对象
      this.newDevice = {
        name: '',
        type: 'server',
        status: 'planning',
        installDate: '',
        warrantyEndDate: '',
        owner: ''
      };
      // 显示添加设备对话框
      this.addDeviceVisible = true;
      console.log('addDeviceVisible:', this.addDeviceVisible);
    },
    // 添加设备的方法
    addDevice() {
      // 生成新的设备ID
      const newId = Math.max(...this.devices.map(d => d.id), 0) + 1;
      
      // 创建新设备对象
      const device = {
        id: newId,
        name: this.newDevice.name,
        type: this.newDevice.type,
        status: this.newDevice.status,
        installDate: this.newDevice.installDate,
        warrantyEndDate: this.newDevice.warrantyEndDate,
        owner: this.newDevice.owner
      };
      
      // 添加到设备列表
      this.devices.push(device);
      
      // 关闭对话框
      this.addDeviceVisible = false;
      
      // 提示添加成功
      this.$message({
        message: '设备添加成功',
        type: 'success'
      });
    }
  }
}
</script>

<style scoped>
.lifecycle-container {
  max-width: 1200px;
  margin: 0 auto;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page-title {
  font-size: 24px;
  font-weight: bold;
}

.page-actions {
  display: flex;
}

.page-actions button {
  margin-left: 10px;
}

.filters-bar {
  margin-bottom: 20px;
}

.filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.filter-group {
  margin-right: 20px;
  margin-bottom: 10px;
}

.filter-label {
  margin-right: 10px;
  font-weight: bold;
  color: #666;
}

.workflow-container {
  margin-bottom: 20px;
}

.workflow-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.workflow-title {
  font-size: 16px;
  font-weight: bold;
}

.workflow-actions {
  display: flex;
}

.workflow-actions button {
  margin-left: 10px;
}

.workflow-steps {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
  position: relative;
}

.workflow-steps::before {
  content: '';
  position: absolute;
  top: 25px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #e8e8e8;
  z-index: 1;
}

.step {
  position: relative;
  z-index: 2;
  text-align: center;
  width: 16%;
}

.step-circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #f0f7ff;
  border: 2px solid #1890ff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 10px;
  font-size: 20px;
  color: #1890ff;
}

.step.active .step-circle {
  background-color: #1890ff;
  color: white;
}

.step-title {
  font-weight: bold;
  margin-bottom: 5px;
}

.step-description {
  font-size: 12px;
  color: #666;
}

.pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.device-details-panel {
  margin-top: 20px;
}

.device-details-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.device-details-title {
  font-size: 16px;
  font-weight: bold;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.form-actions button {
  margin-left: 10px;
}

.workspace-preview {
  margin-top: 20px;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
  overflow: hidden;
}

.workspace-title {
  background-color: #f5f7fa;
  padding: 10px 15px;
  font-weight: bold;
  border-bottom: 1px solid #e6e6e6;
}

.workspace-content {
  padding: 20px;
  min-height: 150px;
  background-color: #fafafa;
}

.device-preview {
  display: flex;
  align-items: center;
  padding: 15px;
  background-color: white;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.device-icon {
  font-size: 36px;
  margin-right: 20px;
  color: #409EFF;
}

.device-info {
  flex: 1;
}

.device-name {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
}

.device-type {
  color: #606266;
  margin-bottom: 5px;
}
</style>